<template>
  <div>
    <div class="flex justify-between items-center">
      <span class="text-14px">主题颜色</span>
      <ElColorPicker v-model="primary" :predefine="colorList" @change="primaryPicker" />
    </div>
    <div class="flex justify-between items-center">
      <span class="text-14px">暗黑模式</span>
      <el-switch v-model="settingStore.isDark" inline-prompt active-icon="Sunny" inactive-icon="Moon" @change="switchDark" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { useSettingStore } from '@/stores'
import { useTheme } from '@/hooks'
import { DEFAULT_SETTING } from '@/constants'
const settingStore = useSettingStore()
const { primary } = storeToRefs(settingStore)
const { primaryPicker, switchDark } = useTheme()
// 预定义主题颜色
const colorList = [DEFAULT_SETTING.PRIMARY, '#daa96e', '#0c819f', '#409eff', '#27ae60', '#ff5c93', '#e74c3c', '#fd726d', '#f39c12', '#9b59b6']
</script>
